<script >
import { ElMessage } from "element-plus";
import { getUserPage, delUser } from "@/api/user";
import upsertForm from "@/views/system/user/components/upsert-form.vue";

export default {
    name: 'UserList',

    components: {
        upsertForm
    },

    data() {
        return {
            loading: false,
            tableData: [],
            dialog: {
                visible: false,
                title: "新增",
            },
            checkedIds: [],
        }
    },
    methods: {

        handleSelectionChange(rows) {
            // console.log('row',rows);
            this.checkedIds = rows.map((item) => item.id);

        },

        // 获取数据
        refresh() {
            this.loading = true;
            getUserPage().then((data) => {
                console.log('data', data);
                // data=>{list:[],pageition:{}}
                this.tableData = data.list
            }).finally(() => {
                this.loading = false;
            })
        },
        handleAdd() {
            this.dialog.title = '新增';
            this.dialog.visible = true;
        },
        handleEdit(row) {
            console.log(row);
            this.dialog.title = '编辑';
            this.dialog.visible = true;
            this.$nextTick(() => {
                this.$refs.upsertForm.setModel(row);
            })
        },

        handleDelete(id) {
            delUser({
                ids: Array.isArray(id) ? id : [id],
            }).then(() => {
                ElMessage.success('删除成功'),
                    this.refresh();
            })
        },

        // 取消处理
        handleCancel() {
            this.dialog.visible = false;
        },
        handleSuccess() {
            ElMessage.success('成功');
            this.dialog.visible = false;
            this.refresh();
        },
    },
    created() {
        this.refresh()
    }
}
</script>

<template>
    <div class="page">
        <div class="page-search"></div>
        <div class="page-body">
            <div class="toolbar">
                <div class="toolbar-left">
                    <el-button type="info" @click="refresh">刷新</el-button>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                    <el-button type="danger" @click="handleDelete(checkedIds)"
                        :disabled="checkedIds.length <= 0">删除</el-button>
                </div>
                <div class="toolbar-right"></div>
            </div>
            <div class="table">
                <el-table :data="tableData" v-loading="loading" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection" />
                    <el-table-column label="头像" prop="headImg">
                        <template #default="{ row }">
                            <img class="avatar" :src="row.headImg" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名" prop="username" />
                    <el-table-column label="姓名" prop="name" />
                    <el-table-column label="昵称" prop="nickName" />
                    <el-table-column label="角色" prop="roleName" />
                    <el-table-column label="状态" prop="status" />
                    <el-table-column label="手机号码" prop="phone" />
                    <el-table-column label="备注" prop="remark" />
                    <el-table-column label="创建时间" prop="createTime" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="default" size="small" @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-popconfirm title="你确定要删除吗?" @confirm="handleDelete(row.id)">
                                <template #reference>
                                    <el-button type="danger" size="small">
                                        删除
                                    </el-button></template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

        <el-dialog destroy-on-close v-model="dialog.visible" :title="dialog.title" width="750">
            <upsertForm ref="upsertForm" @cancel="handleCancel" @success="handleSuccess" />
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.page-search {
    height: 100px;
    border: 1px solid #000;
}

.toolbar {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: beige;
    padding: 0 10px 0 10px;

    .toolbar-left {
        flex: 1;
    }

    .toolbar-right {
        width: 100px;
        height: 36px;
        background-color: orangered;
    }

}

.avatar {
    width: 40px;
    height: 40px;
}

.table {
    .el-button+.el-button {
        margin-left: 4px;
    }
}
</style>